前端那些事

vuePress-theme-reco chenpeng    2020 - 2021
前端那些事 前端那些事

Choose mode

  • dark
  • auto
  • light
首页
文章目录
  • Browser
  • CSS
  • ES6
  • JavaScript
  • Network
  • TypeScript
  • Vue
  • Vue3
  • Webpack
标签
时间轴
GitHub
author-avatar

chenpeng

85

Article

25

Tag

首页
文章目录
  • Browser
  • CSS
  • ES6
  • JavaScript
  • Network
  • TypeScript
  • Vue
  • Vue3
  • Webpack
标签
时间轴
GitHub
  • Browser

    • 浏览器从输入URL到页面渲染的整个流程
    • 浏览器的重绘与回流
    • 浏览器跨域
    • 浏览器缓存
    • 前端安全
    • localStorage、sessionStorage、cookie、session区别

前端安全

vuePress-theme-reco chenpeng    2020 - 2021

前端安全

chenpeng 2021-03-25 前端安全

# 1.XSS

XSS 的全称是 Cross-Site Scripting,跨站脚本攻击,是指攻击者利用网页开发时留下的漏洞,通过注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的程序。

CSRF 攻击分类:

  1. 非持久型攻击
    • 比如通过 URL 中的查询参数发起攻击,如 http://abcd.com?q=<img src="" onerror="alert(document.cookie)"/>
  2. 持久型攻击
    • 比如在评论中输入 <img src="" onerror="alert(document.cookie)"/> 并提交到后台,所有用户打开网站时,都会触发恶意代码

防御方式:

  1. 使用 HTML 转义。对外部插入的内容都做一次转义,将 script,& < > " ' / 等危险字符做过滤和转义替换,同时尽量避免使用 innerHTML,document.write,outerHTML,eval 等方法,用安全性更高的textContent,setAttribute 等方法做替代

  2. 开启 CSP 防护。内容安全策略(CSP)的设计就是为了防御XSS攻击的,通过在HTTP头部中设置 Content-Security-Policy,就可以配置该策略,比如将 CSP 设置成以下模式:

    Content-Security-Policy: script-src 'self'
    
    1

    那么该网站将:

    • 不允许内联脚本执行
    • 禁止加载外域代码
    • 禁止外域提交
  3. 设置 httpOnly。对于所以包含敏感信息的 cookie,都应该在服务端对其设置 httpOnly,被设置了httpOnly 的cookie字段无法通过JS获取,也就降低了XSS攻击时用户凭据隐私泄漏的风险

# 2.CSRF

CSRF 的全称是 Cross-site request forgery,跨站请求伪造,攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某项操作的目的。

CSRF的攻击流程:

  1. 受害者登录目标网站A
  2. 受害者以某种方式接触到恶意网站B的链接
  3. 受害者点击链接访问网站B, 网站B中的js代码执行, 偷偷向目标网站A发送某个请求
  4. 由于受害者登录过网站A, 因此请求携带了网站A的相关cookie凭证,最后请求成功执行

防御方式:

  1. SameSite Cookie:该属性表示 cookie 不随着跨域请求发送
  2. Token:用户访问网站时,服务器返回一个 token,放在 session 中。当网站发起请求时,不仅要携带 cookie,还要把 token 带上,服务器一起校验确认身份后再执行操作。由于 token 放在session 中,第三方请求无法拿到,所以身份校验不通过
  3. 通源检测:CSRF 都是通过三方网站发起,因此我们如果能判断服务器每次收到的请求来自哪些网站,就可以过滤那些存在安全风险的网站发起的请求,降低被攻击的风险。Referer 和 Origin 是http请求的头部字段之一,用来标志该请求是从哪个页面链接过来的。因此后台服务器可以通过检查该字段是否是来自自己的网站链接,来避免第三方网站发起CSRF攻击。
  4. 增加二次验证:针对一些危险性的操作,可以增加用户的二次验证,比如手机或者邮箱验证码校验